<template>
  <div class="purviewManage-box" id="outterDiv">
    <div class="userList-box">
        <el-tag>账号管理</el-tag>
        <el-table
            :data="userList.filter(data => !search || data.account.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <!-- u.id, account, telephone, r.role, identity, createTime, email, state -->
            <el-table-column
            label="账号"
            prop="account"
            width="150">
            </el-table-column>
            <el-table-column
            label="联系电话"
            prop="telephone"
            width="120">
            </el-table-column>
            <el-table-column
            label="账号角色"
            prop="role"
            width="80">
            </el-table-column>
            <el-table-column
            label="工号"
            prop="identity"
            width="120">
            </el-table-column>
            <el-table-column
            label="创建时间"
            prop="createtime"
            width="150">
            </el-table-column>
            <el-table-column
            label="邮箱"
            prop="email"
            width="200">
            </el-table-column>
            <el-table-column
            label="账号状态"
            width="100">
            <template slot-scope="scope">{{ scope.row.state==='1'?'正常':'已锁定' }}</template>
            </el-table-column>
            <el-table-column
            align="right">
            <template slot="header" slot-scope="{}">
                <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                size="mini"
                v-show="scope.row.role!=='Root'"
                @click="handleEdit(scope.$index, scope.row)">权限管理</el-button>
                <el-button
                size="mini"
                type="danger"
                v-show="scope.row.role!=='Root'"
                @click="handleDelete(scope.$index, scope.row)">注销</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="roleList-box">
        <el-tag>角色管理</el-tag>
        <!-- id,role,description -->
        <el-table
          :data="roleList"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-descriptions style="margin-left:10%;width:80%" title="权限列表" direction="vertical" :column="1" border>
                <el-descriptions-item v-for="(item,index) of getAuthorityListByRole(authorityList,scope.row.role)" :key="index">{{item.description}}----[{{ item.authority }}]</el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <el-table-column
            label="角色标识"
            prop="id">
          </el-table-column>
          <el-table-column
            label="角色名称"
            prop="role">
          </el-table-column>
          <el-table-column
            label="角色描述"
            prop="description">
          </el-table-column>
        </el-table>
    </div>
    <div class="authorityList-box">
        <el-tag>权限管理</el-tag>
        <el-table
        :data="authorityList"
        :default-sort = "{prop: 'description', order: ' ascending'}"
        style="width: 100%">
        <el-table-column
        label="权限标识"
        width="400">
        <template slot-scope="scope">
            <i class="el-icon-collection-tag"></i>
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
        </el-table-column>
        <el-table-column
        label="权限名"
        prop="description"
        sortable
        width="300">
        <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
            <p>权限: {{ scope.row.authority }}</p>
            <p>权限描述: {{ scope.row.description }}</p>
            <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.description }}</el-tag>
            </div>
            </el-popover>
        </template>
        </el-table-column>
        <el-table-column
        label="权限状态"
        width="200">
        <template slot-scope="scope">
            <i class="el-icon-s-opportunity"></i>
            <span style="margin-left: 10px">{{ scope.row.state==='1'?'正常':'锁定' }}</span>
        </template>
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
            size="mini"
            v-show="scope.row.authority!=='Root:highest'&&scope.row.state==='1'"
            @click="lockAuthority(scope.$index, scope.row,'0')">锁定</el-button>
            <el-button
            size="mini"
            type="danger"
            v-show="scope.row.authority!=='Root:highest'&&scope.row.state==='0'"
            @click="unlockAuthority(scope.$index, scope.row,'1')">解锁</el-button>
        </template>
        </el-table-column>
    </el-table>
    </div>
    <div class="teacherList-box">
      <el-tag>指导教师管理</el-tag>
      <el-button style="margin-left:80%;margin-top:5px" @click="showCreateTeacherVisible=true">增加指导教师</el-button>
        <el-table
            :data="teacherList.filter(data => !search || data.value.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <!-- u.id, account, telephone, r.role, identity, createTime, email, state -->
            <el-table-column
            label="标识"
            prop="id"
            width="350">
            </el-table-column>
            <el-table-column
            label="工号"
            prop="code"
            width="200">
            </el-table-column>
            <el-table-column
            label="姓名"
            prop="value"
            width="150">
            </el-table-column>
            <el-table-column
            align="right">
            <template slot="header" slot-scope="{}">
                <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="danger"
                v-show="scope.row.role!=='Root'"
                @click="removeTeacher(scope.$index, scope.row)">注销</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="goTop-box">
        <el-button @click="goTop" circle type="primary" icon="el-icon-top" plain>
        </el-button>
    </div>    
    <el-dialog title="用户信息" :visible.sync="dialogTableVisible">
        <el-descriptions title="用户信息" :column="2">
          <el-descriptions-item label="账号标识">{{ user.id }}</el-descriptions-item>
          <el-descriptions-item label="账号">{{ user.account }}</el-descriptions-item>
          <el-descriptions-item label="工号">{{ user.identity}}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ user.telephone }}</el-descriptions-item>
          <el-descriptions-item label="角色">{{ user.role}}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ user.createtime}}</el-descriptions-item>
          <el-descriptions-item label="帐号状态">{{ user.state==='1'?'正常':'异常'}}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" v-if="user.state==='1'" @click="updateUserAccountStateById(user.id,'0')">锁定账号</el-button>
        <el-button type="success" v-if="user.state==='0'" @click="updateUserAccountStateById(user.id,'1')">解锁账号</el-button>
        <el-button type="primary" v-if="user.role==='users'" @click="updateAccountPurviewById(user.id,'admin')">升级权限</el-button>
        <el-button type="warning" v-if="user.role==='admin'" @click="updateAccountPurviewById(user.id,'users')">降级权限</el-button>
      </div>
    </el-dialog>

    <el-dialog title="发送通知邮件" :visible.sync="emailSendVisible">
      <el-descriptions title="用户信息" :column="1">
          <el-descriptions-item label="注销用户标识">{{ emailParam.id }}</el-descriptions-item>
          <el-descriptions-item label="发件人">{{ emailParam.fromAccount }}</el-descriptions-item>
          <el-descriptions-item label="收件人">{{ emailParam.targetAccount}}</el-descriptions-item>
      </el-descriptions>
      <el-form style="margin-top:20px">
            <el-form-item>
                <el-input clearable v-model="emailParam.passwordCord" placeholder="请输入您QQ邮箱授权码"></el-input>
            </el-form-item>
            <el-form-item>
                <a href="https://service.mail.qq.com/cgi-bin/help?subtype=1&&id=28&&no=1001256" style="" target="_blank">邮箱授权码获取方式指南</a>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button plain type="info" @click="emailSendVisible=false">取消</el-button>
            <el-button plain type="danger" @click="destroyAccountById">注销并发送</el-button>
        </div>
    </el-dialog>
    <el-dialog title="增加教师" :visible.sync="showCreateTeacherVisible">
      <el-form :model="teacherParam">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="teacherParam.value" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工号" :label-width="formLabelWidth">
          <el-input v-model="teacherParam.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属单位" :label-width="formLabelWidth">
          <el-input v-model="teacherParam.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showCreateTeacherVisible = false">取 消</el-button>
        <el-button type="primary" @click="createTeacher">确 定</el-button>
      </div>
  </el-dialog>
  </div>
</template>

<script>
import {v4 as uuidv4}from 'uuid'
import $ from 'jquery';
import AES from '@/util/crypto';
import { mapState } from 'vuex';
export default {
    name:'purviewManage',
    data() {
      return {
        showCreateTeacherVisible:false,
        dialogTableVisible:false,
        emailSendVisible:false,
        search: '',
        user:{
          id:'', 
          account:'',
          telephone:'',
          role:'',
          identity:'',
          createTime:'', 
          email:'', 
          state:''
        },
        emailParam:{
          id:'',
          fromAccount:'',
          passwordCord:'',
          targetAccount:'',
        },
        teacherParam:{
          code:'',
          value:'',
          description:''
        },
        passwordCode:'',
        formLabelWidth: '120px'
      }
    },
    computed:{
      ...mapState('_purview',['userList','roleList','authorityList','teacherList'])
    },
    methods:{
        handleEdit(index, row) {
          this.dialogTableVisible=true
            Object.assign(this.user,row)
        },
        handleDelete(index, row) {
            let obj={
              'id':row.id,
              'fromAccount':JSON.parse(AES.decrypt(sessionStorage.getItem("userObj"))).email,
              'passwordCord':this.passwordCode,
              'targetAccount':row.email.split("@")[0],
            }
            Object.assign(this.emailParam,obj);
            this.emailSendVisible=true;
        },
        lockAuthority(index, row,state){
          let type='authority';
          let obj={
            'id':row.id,
            'state':state,
            'type':type  
          }
          this.$store.dispatch("_purview/updateUserAccountStateById",obj);
        },
        unlockAuthority(index, row,state){
          let type='authority';
          let obj={
            'id':row.id,
            'state':state,
            'type':type  
          }
          this.$store.dispatch("_purview/updateUserAccountStateById",obj);
        },
        updateUserAccountStateById(id,state){
          let type='account';
          let obj={
            'id':id,
            'state':state,
            'type':type
          }
          this.$store.dispatch("_purview/updateUserAccountStateById",obj);
          this.dialogTableVisible=false;
        },
        updateAccountPurviewById(id,role){
          this.$confirm('此操作会将会更新用户权限为'+role+',是否继续?【降低权限会立即生效,升级权限用户下次登陆会生效】', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
              let obj={
                'id':id,
                'role':role
              }
              this.$store.dispatch("_purview/updateAccountRoleById",obj)
              this.dialogTableVisible=false;
            this.$message({
                type: 'success',
                message: '正在更新...'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
        },
        destroyAccountById(){
          if(this.passwordCode===''){
              this.$message({
                  type:'error',
                  message: '请填写邮箱授权码'
              });
              return;   
          }
          this.$store.dispatch("_purview/deleteAccountById",this.emailParam);
          this.emailSendVisible=false;
        },
        goTop(){
            $( "#outterDiv" ).animate( { scrollTop: 0 } );
        },
        getAuthorityListByRole(originArr,role){
          let resultArr=[];
          $.each(originArr,(index,item)=>{
            if(item.authority.indexOf(role)!=-1){
              resultArr.push(item)
            }
          })
          return resultArr;
        },
        removeTeacher(index,row){
          this.$confirm('即将删除教师记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
              this.$store.dispatch("_purview/deleteTeacherById",{'id':row.id});           
            this.$message({
                type: 'success',
                message: '正在删除...'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });     
        },
        createTeacher(){
          if(this.teacherParam.value===''||this.teacherParam.code===''||this.teacherParam.description===''){
            this.$message({
                type:'warning',
                message: '请检查输入是否有空缺'
            });
            return;
          };
          let obj=Object.assign(this.teacherParam,{'id':uuidv4().slice(0,-4)});
          this.$store.dispatch("_purview/createTeacher",obj)          
          this.showCreateTeacherVisible=false;
        }
    },
    mounted(){
      this.$store.dispatch("_purview/getUserMessageListByPurview");
      this.$store.dispatch("_purview/getTeacherList")
    }
}
</script>

<style scoped lang="css">
    .purviewManage-box{
        position:inherit;
        top:0;
        height:100%;
        left:0;
        width:100%;
        overflow: auto;
    }
    .userList-box{
        position: inherit;
        top: 2%;
        margin-left:5%;
        height: 50%;
        width:90%;
        overflow: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .roleList-box{
        position: inherit;
        top: 55%;
        margin-left:5%;
        height: 50%;
        width:90%;
        overflow: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .authorityList-box{
        position: inherit;
        top:108%;
        margin-left:5%;
        height: 50%;
        width:90%;
        overflow: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
        
    }
    .teacherList-box{
      position: inherit;
      top: 160%;
      margin-left:5%;
      height: 50%;
      width:90%;
      overflow: auto;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .goTop-box{
        position: inherit;
        top: 220%;
        height: 1%;
        width: 100%;
        text-align: right;
    }
</style>